<template>
		<div>
			 <div class="header">
				 <h3>2024高三3月月考全科-物理</h3>
				 <span>模板管理</span>
				 <p>
					 <b><img src="../../assets/image/school/qp.png" alt="">全屏(F11)</b>
					 <em>退出</em>
				 </p>
			 </div>
			 <div class="tabNav">
				 <ul>
					 <li v-for="(item,index) in navbar" :class="tabnavindex==index?'hover':''" @click="tabNav(index,item.id)">{{item.name}}</li>
				 </ul>
				 <span>复用其他考试模板</span>
			 </div>
			 <div class="uploadMarks" v-if="tabnavindex===0">
				 <el-button class="smcsbutton">扫描服务参数</el-button>
				 <div class="boxcenter">
					 <div class="uploadCardimage">
						 <div class="uploaddiv">
							 <span class="uploaddivattention">请上传 2 张 200dpi分辨率彩色图像  扫描模板图（拖动可排序）</span>
							 <UploadImage
							       v-for="(image, index) in images"
							       :key="index"
								   :imageslist="index"
							       @image-uploaded="updateImage(index, $event)"
							    />
								<div style="display: flex;justify-content: left;align-items: center;position:absolute;z-index:100;left:50%;top:50%;transform: translate(-50%,-50%);">
									<div class="image-preview" v-for="(item,index) in modelobj.templateImages">
										<img :src="item.imageUrl" alt="Uploaded Image" style="width:150px;height:150px;" />
									</div>
								</div>
						 </div>
					 </div>
					 <div class="uploadcardInfo">
						 <h3>{{$route.query.subjectName}}模板设置</h3>
						 <ul>
							 <li>
								 <span>试卷结构：</span>
								 20客观题+10主观题
							 </li>
							 <li>
								 <span>卷面满分：</span>
								 100分(80分客观题+20分)
							 </li>
							 <!-- <li>
								 <span>考号类型：</span>
								  <el-select v-model="examclassify" placeholder="条形码/涂点/手写">
									 <el-option
									   v-for="item in examclassifylist"
									   :key="item"
									   :label="item"
									   :value="item">
									 </el-option>
								   </el-select>
							 </li> -->
							 <li>
								<span>考号位数：</span>
								<el-select v-model="modelobj.examNoLength" placeholder="4-22">
									 <el-option
									   v-for="item in examNumberlist"
									   :key="item"
									   :label="item"
									   :value="item">
									 </el-option>
								</el-select>
							 </li>
							 <li>
								<span>答题卡页数：</span>
								<el-select v-model="modelobj.answerCardPages" placeholder="2/4/6" @change="cardNumberButton">
									 <el-option
									   v-for="item in cardNumberlist"
									   :key="item"
									   :label="item"
									   :value="item">
									 </el-option>
								</el-select>
							 </li>
						 </ul>
						 <div class="examboxbutton">
							 <el-button @click="modeluploadsure">保存</el-button>
							 <el-button @click="modeluploadcancel">取消</el-button>
							 <el-button @click="zdsbmodel">自动识别模版</el-button>
						 </div>
					 </div>
				 </div>
			 </div>
			 <div v-else>
				 <div v-if="tabnavindex===1">
					 <vueCropper :imageUrllist="modelobj.templateImages"></vueCropper>
				 </div>
				 <div class="cropperBox" v-else>
					 <div class="cropperImageset">
						 <ImageSelector :parentData="tabnavindex" :imageUrllist="modelobj.templateImages" @updateMarkList="handleUpdateMarkList" @modeltype="modeltype" :modelarealistcavans="modelarealistcavans"/>
						 <div class="routate" style="display: none;">
						 	<el-select v-model="questiontype" placeholder="请选择">
						 	    <el-option
						 	      v-for="item in questionList"
						 	      :key="item.id"
						 	      :label="item.name"
						 	      :value="item.id">
						 	    </el-option>
						 	</el-select>
						 	<el-button type="primary">圈选</el-button>
						 </div>
					 </div>
					 <div class="uploadcardInfo">
						 <h3>{{questiontype==1?'定位点':'文字定位'}}-编辑</h3>
						 <ul>
							 <li>
								 <span>圈选框为：</span>
								 <el-select v-model="questiontype" placeholder="请选择">
								     <el-option
								       v-for="item in questionList"
								       :key="item.id"
								       :label="item.name"
								       :value="item.id">
								     </el-option>
								 </el-select>
							 </li>
							 <!-- <li>
								 <span>卷面满分：</span>
								 100分(80分客观题+20分)
							 </li> -->
							 <li v-if="tabnavindex==4">
								 <span>横竖排：</span>
								  <el-select v-model="examclassify" placeholder="条形码/涂点/手写">
									 <el-option
									   v-for="item in examclassifylist"
									   :key="item"
									   :label="item"
									   :value="item">
									 </el-option>
								   </el-select>
							 </li>
							 <!-- <li>
								<span>考号位数：</span>
								<el-select v-model="examNumber" placeholder="4-22">
									 <el-option
									   v-for="item in examNumberlist"
									   :key="item"
									   :label="item"
									   :value="item">
									 </el-option>
								</el-select>
							 </li> -->
							 <li v-if="tabnavindex==4||tabnavindex==5">
								<span>包含题号：</span>
								<el-input type="textarea"></el-input>
							 </li>
						 </ul>
						 <div v-if="tabnavindex!=2">
							 <h3 style="border:none;border-top:solid 1px #D8E4F0;margin-top:25px">手动调整</h3>
							 <ul>
								 <li>
									 <span>选项排列：</span>
									 <el-radio-group v-model="selectradio">
										 <el-radio :label="1">横排</el-radio>
										 <el-radio :label="2">竖排</el-radio>
									 </el-radio-group>
								 </li>
								 <li>
									 <span>填涂框高</span>
									 <el-input-number v-model="fillinWidth" @change="handleChange" label="请输入"></el-input-number>
								 </li>
								 <li>
									 <span>填涂框宽</span>
									 <el-input-number v-model="fillinHeight" @change="handleChange" label="请输入"></el-input-number>
								 </li>
								 <li>
									 <span>间隔高度</span>
									 <el-input-number v-model="intervalWidth" @change="handleChange" label="请输入"></el-input-number>
								 </li>
								 <li>
									 <span>间隔宽度</span>
									 <el-input-number v-model="intervalHeight" @change="handleChange" label="请输入"></el-input-number>
								 </li>
							 </ul>
						 </div>
						 <div class="examboxbutton1">
							 <el-button @click="modelsave">保存</el-button>
							 <el-button>取消</el-button>
						 </div>
					 </div>
				 </div>
			 </div>
		</div>
</template>

<script>
// import ImageSelector from '../../components/school/imgcj.vue';
// import ImageSelector from '../../components/school/imagecanvas.vue'
import vueCropper from '../../components/school/vuecropper.vue'
// import ImageSelector from '../../components/school/fabricimg.vue'  //切图
import UploadImage from '../../components/school/upload.vue';
import { get, post, del, put } from '../../request/api.js'
export default {
  name: 'App',
  data(){
	return{
		navbar:[
			{
				name:'模板信息及上传',
				id:0,
			},
			{
				name:'水平定位',
				id:1,
			},
			{
				name:'定位区',
				id:2,
			},
			{
				name:'准考证号区',
				id:3,
			},
			{
				name:'客观题区',
				id:4,
			},
			{
				name:'主观题区',
				id:5,
			}
		],
		tabnavindex:0,
		examclassify:'',
		examclassifylist:['条形码','涂点','手写'],
		examNumber:'',
		examNumberlist:[4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22],
		cardNumber:2,
		cardNumberlist:[2,4,6],
		cardColor:'',
		cardColorlist:['黑色','灰色','彩色'],
		examdpi:'',
		examdpilist:[150,200,300],
		images: [],
		questiontype:'',
		questionList:[
			{
				name:'定位点',
				id:1
			},
			{
				name:'文字定位',
				id:2
			}
		],
		
		selectradio:1,
		fillinWidth:0,
		fillinHeight:0,
		intervalWidth:0,
		intervalHeight:0,
		modelobj:{
		  id:0,
		  examId:0,
		  examCourseId:0,
		  examNoLength:4,
		  answerCardPages:2,
		  status:0,
		  templateImages: []
		},
		moduleImageurl:{},
		templateId:'',//模板id
		examCourseId:'',//考试科目id
		modeldata:{
			templateId: 0,
			examCourseId: 0,
			type: 0
		},
		positioningare:{
			id: 0,
			templateId: 0,
			templateAreaType: 0,
			templateCuttingRegion:[]
		},
		modeltypequestion:'',
		modelarealist:[],
		modelarealistcavans:[]
	}  
  },
  mounted() {
  	this.uploadNumber(this.cardNumber)
	this.modeltab()
	this.templateId = this.modelobj.templateImages[0].templateId
	this.examCourseId = this.$route.query.subjectId
	
  },
  methods:{
	  modeltype(data){
		  this.modeltypequestion = data
	  },
	  handleUpdateMarkList(newVal) {
	          // 在这里处理从子组件传递过来的值
			this.positioningare.templateCuttingRegion = newVal.map((item, index) => ({
					id: index,
					templateId:this.templateId, // 如果有具体的 templateId 值，可以在这里赋值
					templatePointType:0, // 如果有具体的 templatePointType 值，可以在这里赋值
					width: item.w,
					height: item.h,
					x: item.x,
					y: item.y
			}))
	   },
	  // 获取模板信息
	  modelinfo(){
	  		  post('/template/cuttingregion/area',this.modeldata)
	  		  .then(res=>{
	  			  //console.info(res)
				  if(res.code==200){
					  this.modelarealist = res.data
					  this.modelarealistcavans = res.data.templateCuttingRegion.map(item => ({
						w: item.width,
						h: item.height,
						x: item.x,
						y: item.y,
						id:item.id,
						templatePointType:item.templatePointType,
						templateId:item.templateId
					}));
					// //console.info(this.modelarealistcavans)
				  }else{
					  this.$message.error(res.message); 
				  }
	  		  })
	  		  .catch(error=>{
	  			  this.$message.error(error.message); 
	  		  })
	  },
	tabNav(num,id){
		this.tabnavindex = num
		if(num!=0||num!=1){
			this.modeldata.templateId = this.modelobj.templateImages[0].templateId
			this.modeldata.examCourseId = this.$route.query.subjectId
			this.modeldata.type = parseInt(num-1)
			this.modelinfo()
		}
	},
	updateImage(index, newImageUrl) {
		const updatedItem = {
			page: index+1,
			imageUrl: newImageUrl[0].imageUrl,
		 };
	  this.$set(this.images, index, updatedItem);
	},
	//计算多少个上传
	uploadNumber(num){
		for (let i = 0; i < num; i++) {
		    this.images.push('');
		}
	},
	cardNumberButton(val){
		this.images = []
		this.uploadNumber(val)
	},
	handleChange(value){
		
	},
	// 保存模板
	modeluploadsure(){
		this.modelobj.templateImages = this.images
		this.modelobj.examId = Number(this.$route.query.examid)
		this.modelobj.examCourseId = Number(this.$route.query.subjectId)
		// //console.info(this.modelobj)
		post('/template/save',this.modelobj)
		.then(res=>{
			if(res.code==200){
				this.tabnavindex = 1
			}else{
				this.$message.error(res.message); 
			}
		})
		.catch(error=>{
			this.$message.error(error.message); 
		})
	},
	// 获取模板
	modeltab(){
		const url = `/template/examcourse/${this.$route.query.subjectId}`;
		get(url)
		.then(res => {
			if(res.code==200){
				this.modelobj = res.data
				// this.moduleImageurl = res.data
				// this.modelobj.examNoLength = res.data.examNoLength
				// this.modelobj.answerCardPages = res.data.answerCardPages
			}
			// else{
			// 	this.$message.error(res.message); 
			// }
		})
		.catch(error => {
			 this.$message.error(error.message); 
		});
	},
	// 取消模板
	modeluploadcancel(){
		
	},
	zdsbmodel(){
		
	},
	// 保存圈选区域
	modelsave(){
		this.positioningare.templateId = this.modelobj.templateImages[0].templateId
		this.positioningare.templateAreaType = parseInt(this.tabnavindex-1)
		this.positioningare.templateCuttingRegion[0].templatePointType = this.modeltypequestion
		this.positioningare.templateCuttingRegion[0].templateId = this.modelobj.templateImages[0].templateId
		// //console.info(this.positioningare)
		post('/template/cuttingregion/save',this.positioningare)
		.then(res=>{
			// //console.info(res)
		})
		.catch(error=>{
			
		})
	}
  },
  components: {
    vueCropper,UploadImage
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}
.header{
	min-width:100%;padding:0 40px;
	height:48px;
	padding:0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:#fff;
	background:#2379F6;
	font-size:16px;
}
.header h3{
	font-weight: normal;
	font-size:16px;
}
.header p{
	display: flex;
}
.header p b{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 134px;
	height: 32px;
	background: rgba(255,255,255,0.1);
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	text-align: center;
	line-height:32px;
	cursor: pointer;
	margin-right:14px;
}
.header p b img{
	width:16px;
	margin-right:8px;
}
.header p em{
	display: inline-block;
	width: 76px;
	height: 32px;
	background: #FFFFFF;
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	color:#2379F6;
	text-align: center;
	line-height:32px;
	cursor:pointer
}
.tabNav{
	min-width:100%;padding:0 40px;
	height:54px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 24px 0 10px;
	background:#fff;
}
.tabNav ul{
	display: flex;
	align-items: center;
	font-size:14px;
}
.tabNav ul li{
	padding:0 20px;
	cursor: pointer;
	line-height:38px;
	color:#557292;
	position:relative
}
.tabNav ul li:hover,.tabNav ul li.hover{
	color:#2A303B;
}
.tabNav ul li:hover::after,.tabNav ul li.hover::after{
	content:'';
	width: 24px;
	height: 4px;
	background: #295CFF;
	border-radius: 2px;
	position:absolute;
	left:50%;
	transform: translateX(-50%);
	bottom:0
}
.tabNav span{
	display: inline-block;
	width: 140px;
	height: 34px;
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	font-weight: 500;
	font-size: 14px;
	color: #295CFF;
	text-align: center;
	line-height:34px;
	cursor: pointer;
}
/* 上传 */
.uploadMarks{
	box-sizing: border-box;
	background:#F4F7FD;
	width:100vw;
	height:calc(100vh - 102px);
	position: relative;
}
.smcsbutton{
	width: 124px;
	height: 34px;
	background: #2379F6;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	text-align: center;
	border:none;
	/* margin:24px 0 0 24px; */
	position: absolute;
	padding:0;
	left:24px;
	top:24px;
}
.boxcenter{
	display: flex;
	justify-content: space-between;
}
.uploadcardInfo{
	height:calc(100vh - 102px);
	background:#fff;
	position:relative
}
.examboxbutton{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
}
.examboxbutton >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.examboxbutton1{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
	justify-content: center;
}
.examboxbutton1 >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton1 >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton1 >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.uploadcardInfo h3{
	line-height:67px;
	border-bottom:solid 1px #D8E4F0;
	padding:0 24px;
	color:#2A303B;
	font-weight:normal
}
.uploadcardInfo ul li{
	display: flex;
	align-items: center;
	color:#8E96A4;
	font-size:16px;
	padding:0 24px;
	margin-top:24px;
}
.uploadcardInfo ul li span{
	color:#8E96A4;
	width:100px;
}
.uploadcardInfo ul li >>> .el-input__inner{
	border-radius:10px;
}
.uploadcardInfo ul li >>> .el-textarea{
	width:calc(100% - 100px)
}
.uploadCardimage{
	width:calc(100% - 460px);
	height:calc(100vh - 102px);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position:relative;
}
.uploadCardimage span{
	display: block;
	width:100%;
	text-align: center;
}
.uploaddiv{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.uploaddivattention{
	font-size: 14px;
	color: #B3B8C2;
}
.cropperBox{
	height:calc(100vh - 102px);
	display: flex;
}
.cropperImageset{
	width:calc(100% - 370px);
	height:calc(100vh - 102px);
	overflow:scroll;
	position: relative
}
.routate{
  	position:absolute;
  	left:50px;
  	top:5px;
  	background:#fff;
  	height:60px;
  	display: flex;
  	align-items: center;
  	padding:0 10px 0 0;
  	box-shadow: 0 0 5px rgba(0,0,0,0.1);
  	border-radius:5px;
  	font-size:14px;
  	color:#557292;
  	border-radius: 10px;
	z-index:10
  }
 .routate >>> .el-select,.routate >>>.el-input{
  	width:150px;
  }
 .routate >>> .el-select{
  	margin-right:10px;
  }
  .routate >>>.el-input{
  	margin-left:10px;
  	margin-right:10px;
  }
 .routate >>> .el-button{
  	border-radius:10px;
  	height:35px;
  	width:55px;
  	padding:0 ;
	margin-left:10px
  }
  .routate >>> .el-input__inner{
  	border-radius:10px;
  	height:35px;
  }
  .image-preview img{
	  box-sizing: border-box;
	  width: 150px;
	  height: 150px;
	  background: #FFFFFF;
	  border-radius: 10px;
	  text-align: center;
	  font-size:16px;
	  color:#295CFF;
	  cursor: pointer;
	  margin:22px;
  }
  .breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
  	font-weight:normal
  }
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
  	font-weight:bold
  }
</style>